<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王佳佳1167">
    <title></title>
    <style>
        *
        {
            box-sizing: border-box;
        }
        body
        {
            margin: 0;
            height: 2000px;
        }
        .header-first
        {
            width: 100%;
            height: 28px;
            background-color: #F5F5F5;
            font-size: 12px;
        }
        .header-first>div
        {
            /* border: 1px solid; */
            width: 1170px;
            height: 28px;
            line-height: 28px;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }

        .header-first>div>ul
        {
            margin: 0;
            list-style: none;
            height: 28px;
            color: lightgray; 
        }
        .header-first>div>ul>li>a:hover 
        {
            color: #F10180;
        }
        .header-first a
        {
            color: gray;
            text-decoration: none;
        }
        .triangle
        {
            display: inline-block;
            position: relative;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid gray;
            border-bottom: 5px solid transparent;
            top: 5px;
        }
        .sell:hover .triangle,.vip2:hover .triangle,.person:hover .triangle,.more1:hover .triangle
        {
            display: inline-block; 
            position: relative;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid transparent;
            border-bottom: 5px solid #F10180;
             top: -1px;  
        }
        .header-first .triangle1
        {
            left: 20px;
        } 
        
         .henan-button
        {
            position: relative;
            border: 1px solid transparent;
            width: 82px;
            height: 28px;
            padding-left: 12px;
            z-index: 5;
        } 
         .hanan-all:hover .henan-button
        {
            background-color: white;
            border-left: 1px solid lightgray;
            border-right: 1px solid lightgray;
            z-index: 5; 
        } 
        .hanan-all:hover .henan-button a
        {
            color: #F10180;
        }
        .change:hover .triangle1
        {
            display: inline-block;
            position: relative;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid transparent;
            border-bottom: 5px solid #F10180;
            top: -1px;  
        }
        .hanan-all:hover .hover1
        {
            display: block;
        }
        .hanan-all
        {
            position: relative;
        }
        .hanan-all .hover1
        {
            position: absolute;
            width: 280px;
            height: 435px;
            margin-left: 0;
            background-color: white;
            border: 1px solid lightgray;
            margin-top: -1px;
            display: none;  
            z-index: 2;
        } 
        .hanan-all .hover1 a:hover
        {
            color: #F10180;
        }
        .hover1>section
        {
            display: block;
            width: 240px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            border-bottom: 1px solid lightgray;
            color: black;
        }
        .hanan-all .hover1 ul
        {
            display: block;
            margin-left: -15px;
            list-style: none;
        }
        .hanan-all .hover1 ul a
        {
            padding-left: 5px;
            padding-right: 5px;
        }
        .hanan-all .hover1 ul .henan
        {
            background-color: #F10180;
            color: white;
        }






        .header-first>div>ul>li
        {
            position: relative;
            display: inline-block;
            height: 28px;
            line-height: 28px;
        }
        .header-first>div>ul>li>section
        {
            border: 1px solid transparent;
            position: relative;
            display: inline-block;
            padding-left: 13px; 
            padding-right: 13px;
            height: 28px;
            line-height: 28px;
            z-index: 5;
        }
        .please:hover .please-button
        {
            background-color: white;
            border-left: 1px solid lightgray;
            border-right: 1px solid lightgray;
            z-index: 5;
        }
        .please:hover .please-button a
        {
            color: #F10180;
        }
        .please:hover .hover2
        {
            display: block; 
        }
        .please .hover2
        {
            position: absolute;
            background-color: white;
            border: 1px solid lightgray; 
            width: 265px;
            height: 165px;
            margin-top: -2px;
            margin-left: 0;
            color: gray;
            z-index: 2;
            display: none;  
        }
        .hover2-top
        {
            width: 205px;
            height: 53px;
            margin: auto;
            border-bottom: 1px solid lightgray;
        }
        .hover2-top p
        {
            display: inline-block;
            position: relative;
            top: 5px; 
        }
        .hover2-bottom ul
        {
            list-style: none;
            float: left;
            padding-top: 5px;
        }
        .hover2-bottom ul a:hover
        {
            color: #F10180; 
        }


        .zhuce:hover .zhuce-button a
        {
            color: #F10180;
        }


        .qiandao:hover .qiandao-button
        {
            background-color: white;
            border-left: 1px solid lightgray;
            border-right: 1px solid lightgray;
            z-index: 5;
        }
        .qiandao:hover .qiandao-button>a
        {
            color: #F10180;
        }
        .qiandao:hover .hover3
        {
            display: block;
        }
         .hover3
        {
            position: absolute;
            width: 435px;
            height: 165px;
            border:1px solid lightgray;
            z-index: 2;
            margin-top: -2px;
            margin-left: 0;
            background-color: white;
            color: gray;
            padding-top: 70px;
            display: none; 
        } 
         .hover3-top
        {
            width: 380px;
            height: 50px;
            margin: auto;
            border-top: 3px solid lightgray;
            border-bottom: 1px solid lightgray;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        } 
         .hover3-top>span
        {
            display: inline-block;
        } 
         .hover3-top .icons
        {
            position: absolute;
            width: 380px;
            height: 17px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            top: -9px; 
        } 


         .hover3-bottom
        {
            width: 380px;
            height: 45px;
            line-height: 45px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        } 
        .hover3-bottom span:nth-child(2)
        {
            height: 20px;
            line-height: 20px;
            background-color: #F10180;
            color: white;
            font-size: 10px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 3px;
        }




        .sell:hover .sell-button
        {
            background-color: white;
            border-left: 1px solid lightgray;
            border-right: 1px solid lightgray;
            z-index: 5;
        }
        .sell:hover .sell-button a
        {
            color: #F10180;
        }
        .sell:hover .hover5
        {
            display: block;
        }
        .hover5
        {
            position: absolute;
            width: 125px;
            height: 105px;
            border: 1px solid lightgray; 
            margin-top: -2px;
            margin-left: 0;
            background-color: white;
            display: none;
        }
        .hover5 ul
        {
            list-style: none;
            color: gray;
            padding-left: 15px;
            padding-top: 5px;
        }
        .hover5 ul li
        {
            height: 30px;
        }
        .hover5 a:hover
        {
            color: #F10180;
        }
        .vip2:hover .sell-button a
        {
            color: #F10180;
        }
        .vip2:hover .sell-button
        {
            background-color: white;
            border-left: 1px solid lightgray;
            border-right: 1px solid lightgray;
            z-index: 5;
        }
        .vip2:hover .hover5
        {
            display: block;
        }
        .person:hover .sell-button a
        {
            color: #F10180;
        }
        .person:hover .sell-button
        {
            background-color: white;
            border-left: 1px solid lightgray;
            border-right: 1px solid lightgray;
            z-index: 5;
        }
        .person:hover .hover5
        {
            display: block;
        }





        .phone:hover .phone-button
        {
            background-color: white;
            border-left: 1px solid lightgray;
            border-right: 1px solid lightgray;
            z-index: 5;
        }
        .phone:hover .phone-button a
        {
            color: #F10180;
        }
        .phone:hover .hover6
        {
            display: block;
        }
        .hover6
        {
            position: absolute;
            width: 175px;
            height: 205px;
            border: 1px solid lightgray;
            margin-top: -2px;
            margin-left: 0;
            background-color: white;
            display: none; 
            z-index: 2;
        }
        .hover6 img
        {
            width: 153px;
            height: 153px;
            margin-left: 12px;
            margin-top: 12px;
        }
        .hover6 div
        {
            margin-left: 50px;
        }
        .hover6 a:hover
        {
            color: #F10180;
        }


        .more1:hover .more1-button
        {
            background-color: white;
            border-left: 1px solid lightgray;
            border-right: 1px solid lightgray;
            z-index: 5;
        }
        .more1:hover .more1-button a
        {
            color: #F10180;
        }
        .more1:hover .hover7
        {
            display: block;
        }
        .hover7
        {
            position: absolute;
            z-index: 2;
            width: 285px;
            height: 158px;
            border: 1px solid lightgray;
            margin-top: -2px;
            margin-left: 0;
            background-color: white;
            display: none;  
            color: gray;
        }
        .hover7 .cooperate
        {
            width: 245px;
            height: 70px;
            line-height: 30px;
            margin:  auto;
            border-bottom: 1px solid lightgray;
            line-height: 20px;
        }
        .hover7 .about
        {
            line-height: 30px;
            width: 245px;
            height: 70px;
            margin:  auto;
            line-height: 20px;
        }
        .hover7 a:hover
        {
            color: #F10180;
        }  


        






        .header-last
        {
            /* border: 1px solid lightgray; */
            width: 1170px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .logo
        {
            width: 250px;
            height: 100px;
            margin-left: -20px;
        }
        .header-last ul
        {
            width: 600px; 
            margin: 0;
            padding: 0;
            height: 100px;
            list-style: none;
        }
        .header-last li
        {
            border: 1px solid transparent;
            height: 100px;
            width: 150px;
            line-height: 100px; 
            float: left;
        }
        .header-last li>span
        {
            padding: 20px 20px 40px 20px;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent; 
            border-top: 1px solid transparent;
        }
        .header-last li>span:hover
        {
            background-color: white;
            border-left: 1px solid lightgray;
            border-right: 1px solid lightgray; 
            border-top: 1px solid lightgray;
        }
          .trouble:hover .hover8
        {
            display: block;
        } 
        .hover8
        {
            position: absolute;
            width: 330px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            box-shadow: 0 0 3px lightgray;
            background-color: white;
            z-index: 2;
            top: 120px;
            display: none;
            font-size: 13px;
            color: gray;
        } 
        .hover8 a
        {
            text-decoration: none;
            color: gray;
        }
        .hover8 a:hover
        {
            color: #F10180;
        }

        .header-last ul li img
        {
            width: 126px;
            height: 100px;
        }



        nav
        {
            width: 100%;
            height: 40px;
            background-color: #F10180;
            color: white;
            z-index: 3;
        }
        nav section
        {
            width: 1170px;
            height: 40px;
            margin: 0 auto;
            /* border: 1px solid lightgray; */
            display: flex;
            justify-content: space-between;
        }
        nav a
        {
            text-decoration: none;
            color: #FEFFFE;
        }
        .nav-left
        {
            left: 0;
            height: 40px;
            line-height: 40px;
        }
        .nav-left>div:nth-child(1)
        {
            background-color: #BD1067;
        }
        .nav-left>div
        {
            float: left;
            padding-left: 20px;
            padding-right: 20px;
        }
        .nav-left>div:hover
        {
            background-color: #BD1067;
        }
        .triangle2
        {
            border-top-color: white;
            top: 3px;
        }
        .nav-left>div.more
        {
            position: relative;
        }
        .nav-left>div.more:hover .hover9
        {
            display: block;
        }
        .nav-left>div.more .hover9
        {
            position: absolute;
            width: 560px;
            height: 245px;
            background-color: white;
            z-index: 2;
            display: none;
            left: -478px;
            padding-top: 20px;
            padding-left: 20px;
        }
        .hover9 div
        {
            float: left;
            width: 170px;
            height: 96px;
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
        }
        .hover9>div>section
        {
            width: 170px;
            height: 96px;
            line-height: 90px;
            position: absolute;
            background: linear-gradient(transparent,black);
            margin-top: -80px;
            padding-left: 75px;
            color: white;
            transition: all 0.3s linear;
        }
        .hover9>div:hover section
        {
            margin-top: -110px;
        }
        .nav-right
        {
            height: 40px;
            line-height: 40px;
        }
        .nav-right div
        {
            float: left;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            padding-right: 20px;
        }
        .nav-right .yugao
        {
            height: 20px;
            line-height: 20px;
            margin-top: 10px;
            border-left: 1px solid #BD1067;
        }
        .nav-right div:hover
        {
            background-color: #BD1067;
        }



        main
        {
            width: 100%;
            height: 500px;
            background-image: url(./img/beijing.jpg);
            background-size: 1920px 500px;
            text-align: center;
            position: relative;
        }
        main img
        {
            width: 1130px;
            height: 392px;
            position: absolute;
            top: 50px; 
            left: 395px;
            display: none;
        }
        main img.nowimg
        {
            display: block;
        }
        .prev,.next
        {
            width: 30px;
            height: 50px;
            line-height: 50px;
            position: absolute;
            background-color: black;
            opacity: 0.5;
            top: 220px;
            color: gray;
            font-size: 20px;
            display: none;
        }
        .prev
        {
            
            left: 395px;
        }
        .next
        {
            left: 1495px;
        } 
        main>div
        {
            position: relative;
            width: 1140px;
            height: 57px;
            top: 443px;
            left: 390px;
            box-shadow: 0 0 3px lightgray;
            text-align: center;
        }
        .allbuttons
        {
            width: 920px;
            height: 57px;
            line-height: 57px;
            margin: 0 auto;
            /* display: flex;
            justify-content: space-between; */
        }
        main>div .allbuttons section
        {
            font-size: 12px;
            width: 230px;
            height: 57px;
            /* margin-left: 0; */
            float: left;
        }
        .button
        {
            border-bottom: 3px solid #F10180;
        }
        .allbuttons section div
        {
            height: 12px;
            line-height: 12px;
            width: 230px;
            margin-top: 22.5px;
            border-left: 1px solid lightgray;
            margin-left: 0;
        }
        .allbuttons section:nth-child(1) div.vip
        {
            border-left: none;
        }


        footer
        {
            width: 100%;
        }
        footer>div
        {
            /* border: 1px solid; */
            width: 1140px;
            height: 180px;
            margin: 30px auto;
            background-image: url(./img/bg3.jpg);
            margin-left: 390px;
        }
        footer section
        {
            /* border: 1px solid; */
            width: 585px;
            height: 180px;
            margin-left: 555px; 
            /* margin-right: 0; */
        }
        footer section img
        {
            width: 165px;
            height: 145px;
            float: left;
            margin-left: 25px;
            margin-top: 18px;
        }



        aside
        {
            position: relative;
            height: 100%;
            width: 35px;
            position: fixed;
            top: 0;
            right: 0;
            background-color: black; 
            z-index: 70; 
        }
        .aside-child
        {
            position: relative;
            background-color: black;
            z-index: 80;
        }
        .aside-body
        {
            position: relative;
            /* border: 1px solid white; */
            width: 35px;
            height: 400px;
            margin-top: 200px;
            color: white;
             text-align: center; 
             /* padding-top: 15px; */
             background-color: black;
        }
        .aside-body>section
        {
             margin-top: 20px; 
             position: relative;
             /* background-color: black; */
        }
        .aside-body>section:nth-child(2)
        {
            background-color: #F10180;
        }
        .aside-body>section:nth-child(2) div
        {
            padding-left: 4px;
        }
        .id
        {
            position: relative;
            z-index: 40;
            background-color: black;
        }
        .id:hover .id-button
        {
            position: relative;
            background-color: #F10180;
            /* z-index: 30; */
        }
        .id:hover .id-hover
        {
            /* display: block; */
            margin-top: -38px;
            margin-left: -260px;
            opacity: 1;
        }
        .id-hover
        {
            width: 260px;
            height: 290px;
            border: 1px solid;
            position: absolute;
            margin-left: 0;
            margin-top: -38px;
            background-color: white;
            transition: all 0.3s linear;
            z-index: -1;
            /* display: none;  */
            opacity: 0; 
        }
        .id-1
        {
            width: 260px;
            height: 28px;
            margin: 0;
        }
        .id-3
        {
            width: 263px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-top: 5px;
            color: black;
            font-size: 13px;
        }
        .id-3 a
        {
            text-decoration: none;
            color: black;
        }
        .id-3 a:hover
        {
            color: #F10180;
        }
        .id-4
        {
            width: 260px;
            height: 100px;
            background-color: #F2F4F0;
            color: black;
            padding-top: 10px;
        }
        .id-4>div
        {
            width: 130px;
            height: 100px;
            float: left;
        }
        .id-4>div:nth-child(2) p
        {
            margin-top: 22px;
        }
        .id-5
        {
            width: 260px;
            height: 58px;
            color: #AEE5FF;
            font-size: 15px;
            padding-left: 130px;
            padding-top: 20px;
        }
        .as
        {
            position: relative;
        }
        .as:hover .as-button
        {
            background-color: #F10180; 
        }
        .as:hover .as-hover
        {
            display: block;
            margin-left: -110px;
            opacity: 1;
            /* margin-top: -30px; */
            z-index: -1;
        }
        .as-hover
        {
            /* border: 1px solid black; */
            position: absolute;
            width: 110px;
            height: 22px;
            margin-left: 0;
            margin-top: -22px;
            line-height: 22px;
            text-align: center;
            background-color: white;
            color: black;
            box-shadow: 0 0 2px lightgray;
            /* display: none;  */
            opacity: 0;
            transition: all 0.3s linear;
            z-index: -1;
        }
        
        


        .thelast
        {
            width: 35px;
            height: 60px;
            margin-top: 170px;
            z-index: 80;
        }
        .thelast div
        {
            width: 35px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .thelast .lastvip
        {
            position: relative;
            /* background-color: black; */
            z-index: 20;
        }
        .lastvip:hover .lastvip-button
        {
            background-color: #F10180;
        }
        .thelast .lastvip:hover .lastvip-hover
        {
            display: block; 
            margin-left: -180px;
            opacity: 1;
            z-index: -1;
        }
        .thelast .lastvip-hover
        {
            /* border: 1px solid black; */
            position: absolute;
            width: 180px;
            height: 30px;
            margin-left: 0;
            margin-top: -30px;
            line-height: 30px;
            text-align: center;
            background-color: white;
            color: black;
            box-shadow: 0 0 2px lightgray;
            display: none;   
            transition: all 0.3s linear;
            opacity: 0;
            z-index: -1;
        }

        .icon
        {
            width: 350px;
            height: 250px;
            background-image: url(./img/header.png);
            display: inline-block;
        }
        .icon1
        {
            width: 10px;
            height: 15px;
            background-position: -100px -150px;
            vertical-align: middle;
        }
        .icon2
        {
            width: 20px;
            height: 20px;
            background-position: 0 -60px;
            margin-bottom: 5px;
            vertical-align: middle;
        }
        .icon3
        {
            display: inline-block;
            width: 45px;
            height: 35px;
            background-position: 0 -184px;
            position: relative;
            top: 20px;
        }
        .icon4
        {
            width: 25px;
            height: 17px;
            background-position: -50px -200px;
        }
        .icon-2
        {
            width: 226px;
            height: 223px;
            background-image: url(./img/sprite.png);
            display: inline-block;
            margin: 0 auto;
        }
        .icon-2-1
        {
            width: 25px;
            height: 33px;
            background-position: -5px -133px;
        }
        .icon-2-2
        {
            width: 18px;
            height: 23px;
            background-position: -48px -95px;
        }
        .icon-2-3
        {
            width: 22px;
            height: 25px;
            background-position: -23px -197px;
        }
        .icon-2-4
        {
            width: 21px;
            height: 14px;
            background-position: -168px -48px;
        }
        .icon-2-5
        {
            width: 18px;
            height: 13px;
            background-position: -90px -5px;
        }
        .icon-2-6
        {
            width: 20px;
            height: 17px;
            background-position: -129px -3px;
        }
        .icon-2-7
        {
            width: 21px;
            height: 18px;
            background-position: -168px -2px;
        }
        .icon-2-8
        {
            width: 14px;
            height: 14px;
            background-position: -195px -172px;
            position: relative;
            bottom: -8px;
            left: 90px;
        }
        .icon-2-9
        {
            width: 43px;
            height: 43px;
            background-position: 0 -184px;
        }
        .icon-2-10
        {
            width: 21px;
            height: 27px;
            background-position: -201px 0;
        }
        .icon-2-11
        {
            width: 27px;
            height: 19px;
            background-position: -198px -32px;
        }
        .icon-2-12
        {
            width: 19px;
            height: 19px;
            background-position: -128px -97px;
        }
        .icon-2-13
        {
           width: 20px;
           height: 12px;
           background-position: -87px -100px;
        } 
        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
        <section class="header-first">
            <div>
              <section class="hanan-all change">
                <section class="henan-button">
                    <a href="">河南<span class="triangle triangle1"></span></a>   
                </section>
                <div class="hover1">
                    <section>请选择所在的收货地区</section>
                    <ul>
                        <li>A <a href="">安徽</a><a href="">澳门</a></li>
                        <li>B <a href="">北京</a></li>
                        <li>C <a href="">重庆</a></li>
                        <li>F <a href="">福建</a></li>
                        <li>H <a href="">河北</a><a class="henan" href="">河南</a><a href="">湖南</a></li>
                    </ul>
                </div>
              </section>
                 <ul>
                    <li class="please">
                        <section class="please-button">
                        <a href="">请登录</a>
                        </section>
                        <div class="hover2">
                            <section class="hover2-top">
                                <img class="icon icon3" src="" alt="">
                                <p>您好,[请登录]</p>
                            </section>
                            <div class="hover2-bottom">
                                <ul>
                                    <li><a href="">我的收藏</a></li>
                                    <li><a href="">零钱</a></li>
                                    <li><a href="">我的唯品币</a></li>
                                </ul>
                                <ul>
                                    <li><section><a href="">我的订单</a></section></li>
                                    <li><a href="">我的优惠券</a></li>
                                    <li><a href="">唯品金融</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>/
                    <li class="zhuce">
                        <section class="zhuce-button"><a href="">注册</a></section>
                    </li>/
                    <li class="qiandao"> 
                        <section class="qiandao-button">
                        <img src="./img/jump.gif" alt="">
                        <a href="">签到有礼</a>
                        </section>
                        <div class="hover3">
                            <section class="hover3-top">
                                <div class="icons">
                                    <span class="icon icon4"></span>
                                    <span class="icon icon4"></span>
                                    <span class="icon icon4"></span>
                                    <span class="icon icon4"></span>
                                    <span class="icon icon4"></span>
                                    <span class="icon icon4"></span>
                                    <span class="icon icon4"></span>
                                </div>
                                <span>1天</span>
                                <span>2天</span>
                                <span>3天</span>
                                <span>4天</span>
                                <span>5天</span>
                                <span>6天</span>
                                <span>7天</span>
                            </section>
                            <section class="hover3-bottom">
                                <span>每天签到送惊喜，连续签到更享心动奖励</span>
                                <span>签到</span> 
                            </section>
                        </div>
                    </li>/
                    <li><a href="">我的订单</a></li>/
                    <li class="sell">
                        <section class="sell-button">
                        <a href="">我的特卖</a>  <span class="triangle"></span>
                        </section>
                        <div class="hover5">
                            <ul>
                                <li><a href="">我的特卖(0)</a></li>
                                <li><a href="">商品收藏(0)</a></li>
                                <li><a href="">我的足迹(0)</a></li>
                            </ul>
                        </div>  
                    </li>/
                    <li class="vip2">
                        <section class="sell-button">
                        <a href="">会员俱乐部</a>  <span class="triangle"></span>
                        </section>
                        <div class="hover5">
                            <ul>
                                <li><a href="">俱乐部首页</a></li>
                                <li><a href="">唯品币兑换</a></li>
                                <li><a href="">免费抽大奖</a></li>
                            </ul>
                        </div>
                    </li>/
                    <li class="person">
                        <section class="sell-button">
                        <a href="">客户服务</a>  <span class="triangle"></span>
                        </section>
                        <div class="hover5">
                            <ul>
                                <li><a href="">练习客服</a></li>
                                <li><a href="">帮助中心</a></li>
                                <li><a href="">知识产权投诉</a></li>
                            </ul>
                        </div>
                    </li>/
                    <li class="phone">
                        <section class="phone-button">
                        <span class="icon icon1"></span>
                        <a href="">手机版</a>
                        </section>
                        <div class="hover6">
                            <a href=""><img src="./img/erweima.jpg" alt=""></a>
                            <div><a href="">随时逛  及时抢</a></div>
                        </div>
                    </li>/
                    <li class="more1">
                        <section class="more1-button">
                        <a href="">更多</a> <span class="triangle"></span>
                        </section>
                        <div class="hover7">
                            <div class="cooperate">
                                <p><a href="">合作专区</a></p>
                                <p><a href="">联名卡申请</a>&nbsp;&nbsp;&nbsp;<a href="">唯品卡</a>&nbsp;&nbsp;&nbsp;<a href="">支付专区</a></p>
                            </div>
                            <div class="about">
                                <p><a href="">关于我们</a></p>
                                <p><a href="">Sell on vip</a>&nbsp;&nbsp;&nbsp;<a href="">品牌招商</a>&nbsp;&nbsp;&nbsp;<a href="">官方博客</a></p>
                            </div>
                        </div>
                    </li>
                </ul> 
            </div>
        </section>


        <section class="header-last">
            <img class="logo" src="./img/logo.png" alt="">
            <ul>
                <li><img src="./img/100%.png" alt=""></li>
                <li><img src="./img/7day.png" alt=""></li>
                <li><img src="./img/money.png" alt=""></li>
                <li>
                  <span class="trouble">
                     <span class="icon icon2"></span>我的购物袋
                     <div class="hover8">好像还未登录！<a href="">马上登录</a>查看购物袋吧</div>  
                  </span>
                </li>
            </ul>
        </section>

        <nav>
            <section>
                <div class="nav-left">
                    <div><a href="">首页</a></div>
                    <div><a href="">唯品国际</a></div>
                    <div><a href="">母婴</a></div>
                    <div><a href="">家居家电</a></div>
                    <div><a href="">男士</a></div>
                    <div><a href="">美妆</a></div>
                    <div><a href="">生活超市</a></div>
                    <div><a href="">金融</a></div>
                    <div class="more"><a href="">更多<span class="triangle triangle2"></span></a>
                        <div class="hover9">
                            <div><img src="./img/1467620677036.jpg" alt="">
                                <section>
                                    女装
                                </section>
                            </div>
                            <div><img src="./img/1467620750077.jpg" alt="">
                                <section>
                                    鞋包
                                </section>
                            </div>
                            <div><img src="./img/1467620773404.jpg" alt="">
                                <section>
                                    配饰
                                </section>
                            </div>
                            <div><img src="./img/1467620790247.jpg" alt="">
                                <section>
                                    运动
                                </section>
                            </div>
                            <div><img src="./img/1467620841997.jpg" alt="">
                                <section>
                                    唯品.奢
                                </section>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="nav-right">
                    <div><a href="">分类</a></div>
                    <div><a href="">预告</a></div>
                    <div class="clear"></div>
                </div>
            </section>
        </nav>

        <main>
            <img class="nowimg" src="./img/lunbo01.jpg" alt="">
            <img src="./img/lunbo02.jpg" alt="">
            <img src="./img/lunbo03.jpg" alt="">
            <img src="./img/lunbo04.jpg" alt="">

            <section class="prev">&lt;</section>
            <section class="next">&gt;</section>

            <div>
              <div class="allbuttons">
                <section class="button"><div class="vip">欧莱雅集团VIP大牌日</div></section>
                <section><div>时尚风暴 最高满199减40</div></section>
                <section><div>居家夏末福利大派发</div></section>
                <section><div>全球早秋扫货指南</div></section>
              </div>
            </div>
        </main>


        <footer>
          <div>
            <section>
                <img src="./img/footer1.jpg" alt="">
                <img src="./img/footer2.jpg" alt="">
                <img src="./img/footer3.jpg" alt="">
                <div class="clear"></div> 
            </section>
          </div>
        </footer>


        <aside>
            <section class="aside-child">

            <div class="aside-body">
                <section class="id">
                    <section class="id-button">
                    <img class="icon-2 icon-2-1" src="" alt="">
                    </section>
                    <div class="id-hover">
                        <section class="id-1"><img class="icon-2 icon-2-8" src="" alt=""></section>
                        <section class="id-2">
                            <img class="icon icon-2-9" src="" alt="">
                        </section>
                        <section class="id-3">
                            你好！请<a href="">登录 </a>|<a href=""> 注册</a>
                        </section>
                        <section class="id-4">
                            <div>
                                <img class="icon-2 icon-2-10" src="" alt=""> <p>我的订单</p>
                            </div>
                            <div>
                                <img class="icon-2 icon-2-11" src="" alt=""> <p>我的消息</p>
                            </div>
                        </section>
                        <section class="id-5">会员俱乐部</section>
                    </div>
                </section>
                <section>
                    <img class="icon-2 icon-2-2" src="" alt="">
                        <div>购物袋</div>
                    <img class="icon-2 icon-2-3" src="" alt="">
                </section>
                <section class="as">
                    <section class="as-button">
                    <img class="icon-2 icon-2-4" src="" alt="">
                    </section>
                    <div class="as-hover">我的优惠券</div>
                </section>
                <section class="as">
                    <section class="as-button">
                        <img class="icon-2 icon-2-5" src="" alt="">
                    </section>
                    <div class="as-hover">品牌收藏</div>
                </section>
                <section class="as">
                    <section class="as-button">
                    <img class="icon-2 icon-2-6" src="" alt="">
                    </section>
                    <div class="as-hover">商品收藏</div>
                </section>
                <section class="as">
                    <section class="as-button">
                    <img class="icon-2 icon-2-7" src="" alt="">
                    </section>
                    <div class="as-hover">我的足迹</div>
                </section>
            </div>
            <section class="thelast">
                <div class="lastvip">
                    <section class="lastvip-button">
                    <span class="icon-2 icon-2-12"></span>
                    </section>
                    <div class="lastvip-hover">会员反馈</div>
                </div>
                <div class="return"><span class="icon-2 icon-2-13"></span></div>
            </section>

            </section>
        </aside>
   </body>
</html>


<script>
    window.onload = function()
    {
//轮播图
        var imgs = document.querySelectorAll('main img');
        var buttons = document.querySelectorAll('.allbuttons section');
        var main = document.querySelector('main');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');

        var index = 0;
        //上一张
        function previmg()
        {
            index =   index == 0 ?  index =  imgs.length-1 : index-1 ;
            showimg();
        }
        //下一张
        function nextimg()
        {
            index =   index == imgs.length-1 ? 0 : index+1;
            showimg();
        }
        
        //播放
        function showimg()
        {
            for(var i = 0; i < imgs.length; i++)
            {
                imgs[i].className = '';
                buttons[i].className = '';
            }
            imgs[index].className = 'nowimg';
            buttons[index].className = 'button';
        }
        //循环自动播放
        var timer = setInterval(nextimg,1500);

        //根据指示灯切换图片
        for(var i = 0; i < buttons.length; i++)
        {
            buttons[i].index = i;
            buttons[i].onmouseover = function()
            {
                clearInterval(timer);
                index = this.index;
                showimg();
            }
            buttons[i].onmouseout = function()
            {
                timer = setInterval(nextimg,1500);
            }
        }

        //鼠标进入main播放暂停
        main.onmouseover = function()
        {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        main.onmouseout = function()
        {
            if(timer)
            {
                return;
            }
            timer = setInterval(nextimg,1500);
            prev.style.display = 'none';
            next.style.display = 'none';
        }
        
        prev.onclick = function()
        {
            previmg();
        }
        next.onclick = function()
        {
            nextimg()
        }


//固定导航
    var nav = document.querySelector('nav');
    window.onscroll = function()
    {
        var scrollTop = document.documentElement.scrollTop;
        if(scrollTop >= 128)
        {
            nav.style.top = '0';
            nav.style.position = 'fixed';
        }
        else
        {
            nav.style.position = '';
        }
    }



//返回顶部
    var returntop = document.querySelector('.return');
    returntop.onclick = function()
    {
        var timer;
        update();
        function update()
        {
            document.scrollingElement.scrollTop -= 60;
            timer = requestAnimationFrame(update);
            if(document.scrollingElement.scrollTop <= 0)
            {
                cancelAnimationFrame(timer);
            }
        }
    }

    }
    




    


</script>